<template>
  <div v-if="imagesURLs.length!=0">
    <div class="image" v-if="imagesURLs.length==1" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative"
      :style="{
        height:((colWidth - 60)/1.35).toString() + 'px',
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
    >
      <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

      </div>
    </div>

    <div v-if="imagesURLs.length==2" style="width: 100%;position: relative"
      :style="{
        height:((colWidth - 60 - 3) / 2).toString() + 'px',
      }"
    >
      <div class="image" style="display: inline-block;height: 100%;width: calc((100% - 3px) / 2);border-radius: 5px;background-color: var(--color-neutral-1);margin-right: 3px;position: relative;background-size: cover;background-repeat: no-repeat;background-position: center;background-repeat: no-repeat"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

        </div>
      </div>
      <div class="image" style="display: inline-block;height: 100%;width: calc((100% - 3px) / 2);border-radius: 5px;background-color: var(--color-neutral-1);position: relative;background-size: cover;background-repeat: no-repeat;background-position: center;background-repeat: no-repeat"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

        </div>
      </div>
    </div>

    <div v-if="imagesURLs.length==3" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60) / 3 * 2).toString() + 'px'
      }"
    >
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(66.6% - 2px)"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

        </div>
      </div>

      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: calc(50% - 1.5px);width: calc(33.3% - 1px);position: absolute;right: 0;top: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

        </div>
      </div>

      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: calc(50% - 1.5px);width: calc(33.3% - 1px);position: absolute;right: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

        </div>
      </div>
    </div>

    <div v-if="imagesURLs.length==4" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60)).toString() + 'px'
      }"
    >
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;top: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;top: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

        </div>
      </div>

    </div>

    <div v-if="imagesURLs.length==5" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60 - 6) / 3 + (colWidth - 60 - 3) / 2 + 3).toString() + 'px'
      }"
    >
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;top: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')',
        height:((colWidth - 60 - 3) / 2).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;top: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')',
        height:((colWidth - 60 - 3) / 2).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[4] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[4])">

        </div>
      </div>


    </div>

    <div v-if="imagesURLs.length==6" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60) / 3 * 2 + (colWidth - 60) / 3).toString() + 'px'
      }"
    >
      <div style="width: 100%;position: relative"
           :style="{
        height:((colWidth - 60) / 3 * 2).toString() + 'px'
      }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(66.6% - 2px)"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

          </div>
        </div>

        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: calc(50% - 1.5px);width: calc(33.3% - 1px);position: absolute;right: 0;top: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

          </div>
        </div>

        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: calc(50% - 1.5px);width: calc(33.3% - 1px);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

          </div>
        </div>
      </div>

      <div style="margin-top: 3px;width: 100%;position: relative;position: absolute;left: 0;bottom: 0">
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[4] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[4])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[5] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[5])">

          </div>
        </div>
      </div>

    </div>

    <div v-if="imagesURLs.length==7" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60) + (colWidth - 60)/3).toString() + 'px'
      }"
    >
      <div style="width: 100%;position: relative"
        :style="{
          height:(colWidth - 60).toString() + 'px'
        }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;top: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;top: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

          </div>
        </div>
      </div>


      <div style="margin-top: 3px;width: 100%;position: relative;position: absolute;left: 0;bottom: 0">
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[4] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[4])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[5] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[5])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[6] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[6])">

          </div>
        </div>
      </div>

    </div>

    <div v-if="imagesURLs.length==8" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60 - 6) / 3 + (colWidth - 60 - 3) / 2 + 3 + (colWidth - 60 - 6) / 3 + 3).toString() + 'px'
      }"
    >
      <div style="width: 100%;position: relative"
           :style="{
        height:((colWidth - 60 - 6) / 3 + (colWidth - 60 - 3) / 2 + 3).toString() + 'px'
      }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;left: 0;top: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')',
        height:((colWidth - 60 - 3) / 2).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc(50% - 1.5px);height: calc(50% - 1.5px);position: absolute;right: 0;top: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')',
        height:((colWidth - 60 - 3) / 2).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[4] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[4])">

          </div>
        </div>
      </div>

      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[5] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[5])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;left: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[6] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[6])">

        </div>
      </div>
      <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(50% - 1.5px);position: absolute;right: 0;bottom: 0"
           :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[7] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
      >
        <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[7])">

        </div>
      </div>

    </div>

    <div v-if="imagesURLs.length==9" style="width: 100%;position: relative"
         :style="{
        height:((colWidth - 60)).toString() + 'px'
      }"
    >
      <div style="width: 100%;position: relative"
           :style="{
    height:((colWidth - 60 - 6) / 3).toString() + 'px'
  }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[0] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[0])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[1] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[1])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[2] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[2])">

          </div>
        </div>
      </div>

      <div style="width: 100%;position: relative;margin-top: 3px"
           :style="{
    height:((colWidth - 60 - 6) / 3).toString() + 'px'
  }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[3] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[3])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[4] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[4])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[5] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[5])">

          </div>
        </div>
      </div>
      <div style="width: 100%;position: relative;margin-top: 3px"
           :style="{
    height:((colWidth - 60 - 6) / 3).toString() + 'px'
  }"
      >
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[6] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[6])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;left: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[7] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px',
        left:((colWidth - 60 - 6) / 3 + 9).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[7])">

          </div>
        </div>
        <div class="image" style="width: 100%;border-radius: 5px;background: var(--color-neutral-1);background-position: center;background-size: cover;background-repeat: no-repeat;position: relative;height: 100%;width: calc((100% - 6px) / 3);height: calc(100%);position: absolute;right: 0;bottom: 0"
             :style="{
        backgroundImage:'url(' + serverURL + '/download/' + imagesURLs[8] + ')',
        height:((colWidth - 60 - 6) / 3).toString() + 'px'
      }"
        >
          <div class="image-inside" style="width: 100%;height: 100%;" @click="openLink(serverURL + '/download/' + imagesURLs[8])">

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {

    };
  },
  methods: {
    openLink(url){
      window.open(url,'_blank')
    }
  },
  mount() {

  },
  props: {
    imagesURLs: {
      type: Array,
      required: true,
    },
    colWidth:0,
    serverURL:''
  }
};
</script>

<style>

.image-inside{

}

.image:hover .image-inside{
  background-color: rgba(0,0,0,0.05);
}

</style>